import { RightOutlined } from '@ant-design/icons'
import { Modal, Button } from 'antd'
import { useState } from 'react'

export default function TagContainer ({ list }) {

    const [showMore, setShowMore] = useState(() => (false))

    const handleClickOpenShowMore = () => {
        setShowMore(() => (true))
    }

    const handleClickCloseOpenShowMore = () => {
        setShowMore(() => (false))
    }

    return (
        <>
            {
                Array.isArray(list)
                    ? (<div>
                        <div className="flex flex-wrap gap-3">
                            {list.slice(0, 9).map(({ name, isHightLight }, index) => {
                                return (
                                    <div 
                                        key={index} 
                                        className={`text-sm px-2 pb-[2px] rounded cursor-pointer ${isHightLight ? 'bg-hightLight' : 'bg-gray-200'}`}
                                    >
                                        <span>
                                            {name}
                                        </span>
                                    </div>
                                )
                            })}
                        </div>
                        {list.length > 9
                            ? (
                                <div className="flex justify-end">
                                    <div className="flex cursor-pointer items-center mt-1" onClick={handleClickOpenShowMore}>
                                        <div>
                                            <span className='text-sm text-gray-400'>
                                                查看更多
                                            </span>
                                        </div>
                                        <div>
                                            <RightOutlined style={{ fontSize: '12px', color: '#93a3af'}}/>
                                        </div>
                                    </div>
                                </div>
                            )
                            : null
                        }
                        <Modal 
                            title='标签' 
                            open={showMore}
                            onCancel={handleClickCloseOpenShowMore}
                            footer={[
                                <Button key="back" onClick={handleClickCloseOpenShowMore}>
                                    关闭
                                </Button>
                            ]}
                            width={600}
                        >
                            <div className="flex flex-wrap gap-5 mt-4">
                                {list.map(({ name, isHightLight }, index) => {
                                    return (
                                        <div 
                                            key={index} 
                                            className={`text-sm px-2 pb-[2px] rounded cursor-pointer ${isHightLight ? 'bg-hightLight' : 'bg-gray-200'}`}
                                        >
                                            <span>
                                                {name}
                                            </span>
                                        </div>
                                    )
                                })}
                            </div>
                        </Modal>
                    </div>
                )
                : null
            }
        </>
    )
}